Class 4 Lecture Demo

Class 4 Agenda:

Link to Agenda

Class 4 Demonstration Labs:

Lecture Demo 1 - GitHub, Glitch, Sentinel Hub: orienting to HTML online
Lecture Demo 2 - Adding elements to HTML
Lecture Demo 3 - Working with HTML tags
Lecture Demo 4 - Incorporating CARTO embed maps

Lecture Demo 1: GitHub, Glitch, Sentinel Hub: orienting to HTML online

To Start, create an account with GitHub. Utilize an email address you can access readily to secure the GitHub verification code:

Signup at GitHub

Once complete, navigate to Glitch and utilize the GitHub signup option and authentication process:

Glitch signup/login

GitHub signup option

GitHub authentication process

Next, navigate to Sentinel Hub | Sentinel Playground. Here we will create two satellite images for download. Navigate within Sentinel Playground to 2 locations of your choice and download their respective image.

Sentinel Hub Playground Interface

Download Image Option at Sentinel Hub Playground

Following the satellite image downloads, open the properties of the images and copy the dimensions of each image:

Image Dimensions

Download Class 4 inclass data direct download HERE IF unable to generate 2 images via Sentinel Playground.
Next, we will resize the aspect ratio of each image by 50%. There are many online aspect calculators; we will use THIS ONE.
Enter the original dimensions of each image; then note and copy into a text document the 50% reduction width and height:

Original Dimensions

50% reduction | note the reduced width and height

Note: if using the Class 4 inclass data, the first image original dimensions are 1975 X 1102; reduction is 987 x 551. The second image original dimensions are 1975 X 1159; reduction is 987 x 579.

Lecture Demo 2 - Adding elements to HTML

In this second demo, we will navigate to Glitch, create a new website project and upload the 2 image files to the assets directory within the site.

Note: this workflow can also be accomplished with our adopted code editor - VS Code. The advantage of Glitch is its ease-of-use; further, for this inclass demonstration lab, a website structure and it’s HTML is conveniently ‘out-of-the-box’, ready for us to revise and use.

First, find the Hello Website option and enact that instance:

Chose Hello Website

This will create a project shell which we can expand in the upper left toggle arrow. We will be using the index.html page and the assets directory:

Access site structure

Next, navigate to the Assets directory and upload both original satellite images:

Upload Image Assets

Once uploaded, click on each image and Copy URL and place into a text document:

Copy image URL

With the images uploaded and the URL of each recorded, navigate to the index.html page in the director tree to the left:

Access index.html

Within the index.html find the <body> and </body> tag section:

Body section within index.html

Find the first default image in the index.html:

 <img src="https://cdn.glitch.com/"
         />

Image Search Position

Replace the existing image URL with the first satellite image URL. Then copy in the second satellite image utilizing the same img src tag structure, but replacing the first image URL with the second image URL. Once complete, preview the work live via Share > Live Site web address.
Next, we will alter the img src tag structure for both images so as to decrease the image size by the 50% aspect ratio reduction. This will give us better sized images for the site. The format is simply width and height declarations, separated by 1 space, both set within the img src opening and closing tags.

 <img src="https://cdn.glitch.com/"
          width="" height=""
         />

Addition of width and height modifications

Again, check the live site to ensure the modification was a success.

Lecture Demo 3 - Working with HTML elements

Within the same index.html page, modify existing HTML elements, remove some HTML elements and add in a couple new elements.
Utilize the following HTML GUIDE to inform your modifications.

Lecture Demo 4 - Incorporating CARTO embed maps

In addition to our image insertions, we can also embed CARTO maps via an iframe element. The basic code structure is as follows. Like img src, further modifications can be made within the element tags:

 <iframe src="https://www.example.com" title="text for title"></iframe>

To start, navigate to your CARTO account and chose one of your current CARTO maps. Continue to the Publish section and copy the embed code:

Secure CARTO embed code for 1 map

Add this HTML element snippet to your index.html under your satellite images within the body section. Live preview your map insertion into the web project to ensure your embed addition is working as expected.